<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<body>
    <script src='/js/vue.js'></script>
    <div id='app'>

        <!-- 什么是生命周期，从生到死 -->
        <!-- 每一个vue程序都会经经历 从创建、 -->


        <p>{{msg}}</p>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                
            },
            methods:{
                show(){
                    console.log('show')
                }
            },
            //beforCeate:()=> {} 可缩写
            beforeCreate(){
                //第一个生命周期函数，表示实例完全被创建之前会执行的函数
                //console.log(this.msg) //因为在beforeCreate之前还没对data和methods 初始化
                // this.show
                console.log("beforeCreate")
            },
            //第二个生命周期函数，在cerated函数前data和methods初始化完毕
            //如果只对data 或者method是只操作一次，一般考虑在created生命周期中执行
            created(){
                console.log(this.msg);
                this.show;
                console.log("Create");
            },
            beforeMount(){
                //第三个生命周期函数，表示模版已经在内存中编译完成,但尚未渲染到页面中
                console.log(document.getElementById("p").innerText);
                console.log("beforeMount");
            },
            mounted(){
                //第四个生命周期函数 ，表示模版已经在内存中编译完成,并渲染到页面中了
                console.log(document.getElementById("p").innerText);
                console.log("mounted");

            },
            beforeUpdate(){
                //第五个生命周期函数，表示界面更新，但数据没有更新
                console.log(document.getElementById("p").innerText);
                console.log("beforeMount");
            },
            updated(){
                //第六个生命周期函数，界面更新的同事数据已经发生改变
            
            },
            beforeDestory(){

            },
            destroyed(){
                
            }
        })
    </script>
</body>
</html>